<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        // 定时器的Bug   定时器叠加的问题
        //    1 不断清除上一个定时器    全局变量t    clearInterval(t) ;     
        //    2 在一段时间内只执行一个定时器   立flag

        // 防抖和节流是为了解决高频率触发事件     onscroll  /   onresize
        //    就是使用延时器  300ms   机会出现定时器Bug

        // BOM 
        //   location  
        //   history  go
        //   onload 等到页面加载完毕之后再执行  
        //   onfocus / onblur    页面资源的加载跟是否获取焦点有关系

        // DOM 
        //   document 
        //   页面的各种宽高及盒子的各种宽高
        //   标签的属性
        //       表单属性  disabled   checked  
        //       普通标签自身的属性   className   id   src     oDiv.id  /  oDiv.getAttribute('id')
        //       标签的自定义属性     <div index="1"></div>   设置  setAttribute('index',1)    getAttribute('index')
        //       className / classList   
        //   标签的样式
        //      cssText  行内样式 
        //      oDiv.style.fontSize  驼峰
        //      className / classList
        //      样式的获取  
        //         行内样式  var b = oDiv.style.color ;
        //         其他样式  var b = getComputedStyle(oDiv)[prop]
        //    循环绑定事件  事件处理函数是异步的  i访问不到了

        // 事件
        //     事件级别   DOM 0级  会覆盖      DOM 2级  不会覆盖
        //     事件监听  addEventListener(evenType , fn , bool)
        //     事件对象  this ************************** / target
        //     事件流 
        //        捕获流
        //        冒泡流
        //     事件委托

        //     事件循环   主线程和任务队列     异步？
        //         1 在主线程上执行同步代码，遇到异步就存在异步队列中
        //         2 等到主线程清空，看异步队列中哪个程序需要先执行，放在主线程上执行





        // console.log(1);
        // setTimeout(function(){
        //     setTimeout(function() {
        //         console.log(++a);
        //     } , 0)
        //     var a = 2 ;
        //     console.log(a);
        //     setTimeout(function() {
        //         console.log(++a);
        //     } , 1000)
        // },0)

        // document.onclick = function() {
        //     console.log(5);
        // }

        // console.log(4);


        // for(var i = 0 ; i < 10 ; i++) {
        //     console.log(i);       // 0-9
        // }


        // for(var i = 0 ; i < 10 ; i++) {


        //     document.onclick = function() {
        //         console.log(i);   // 10    覆盖
        //     }
        // }


        // document.onclick = function () {
        //     console.log(i);   // 10    覆盖
        // }

        // document.onclick = function () {
        //     console.log(i);   // 10    覆盖
        // }

        // document.onclick = function () {
        //     console.log(i);   // 10    覆盖
        // }


        for(var i = 0 ; i < 10 ; i++) {
            setTimeout(function() {
                console.log(i);    // 10个10
            } , 0)   
        }





    </script>

</body>

</html>